<template>
  <view style="height: 100%; display: flex; flex-direction: column">
    <view style="overflow-y: auto; flex: 1; width: 100%">
      <scroll-view :scroll-top="data.scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
        <uni-section title="试题" type="line">
          <uni-card v-for="(item, j) in data.form.lista">
            <uni-title class="uni-body" :title="`${j + 1}、${item.question}【${item.quesTypeName}】(${item.baseScore}分)`"></uni-title>
            <view slot="actions" class="card-actions">
              <view v-if="item.quesTypeId === 1">
                <button
                  :type="it.inspecta === true ? 'primary' : null"
                  v-for="(it, i) in item.lista"
                  class="button"
                  size="mini"
                  @click="click(item, it)"
                >
                  {{ data.letter[i] + ':  ' + it.answer }}
                </button>
              </view>
              <view class="warp" v-if="item.quesTypeId === 2">
                <button
                  :type="it.inspecta === true ? 'primary' : null"
                  v-for="(it, i) in item.lista"
                  class="button"
                  size="mini"
                  @click="click(item, it)"
                >
                  {{ data.letter[i] + ':  ' + it.answer }}
                </button>
              </view>

              <view class="warp" v-if="item.quesTypeId === 3">
                <button
                  :type="it.inspecta === true ? 'primary' : null"
                  v-for="(it, i) in item.lista"
                  class="button"
                  size="mini"
                  @click="click(item, it)"
                >
                  {{ it.answer }}
                </button>
              </view>
              <view class="warp" v-if="item.quesTypeId === 4">
                <view class="input" v-for="(it, index) in item.lista">
                  <input type="text" v-model="it.answera" @input="click(item, it)" />
                </view>
              </view>
            </view>
          </uni-card>
        </uni-section>
      </scroll-view>
    </view>
    <view style="height: 100rpx; display: flex; justify-content: center; align-items: center; background-color: #cccccc">
      <uni-countdown
        :show-day="false"
        :hour="data.form.hour"
        :minute="data.form.minute"
        :second="data.form.second"
        @timeup="timeup"
        :font-size="20"
        color="red"
      ></uni-countdown>
      <button :disabled="data.loading" type="warn" size="mini" @click="submitData()">提交</button>


      <button v-if="userStore.freeExam" type="warn" size="mini" @click="viewExam()">查看答案</button>


      <button type="primary" size="mini" @click="showDrawer('showRight')">答题卡</button>
    </view>

    <uni-drawer ref="showRight" mode="right" :mask-click="false" :width="300" :maskClick="true">
      <view class="scroll-view">
        <scroll-view class="scroll-view-box" scroll-y="true">
          <uni-section title="答题卡" type="line">
            <uni-grid :column="5" :showBorder="false" :square="false" :highlight="true">
              <uni-grid-item v-for="(item, i) in data.form.lista">
                <uni-tag style="margin: 2rpx; text-align: center" :text="i + 1 + ''" :type="item.selected ? 'primary' : null" />
              </uni-grid-item>
            </uni-grid>
          </uni-section>
        </scroll-view>
      </view>
    </uni-drawer>
  </view>
</template>

<script setup>
  import { reactive, ref } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { examromaApi } from '@/api/business/exam/exrom-api';

  import { useUserStore } from '@/store/modules/system/user';

  const userStore = useUserStore();

  const showRight = ref({});

  const props = defineProps({
    docEntry: String,
  });

  const data = reactive({
    form: {
      hour: 24,
      minute: 59,
      second: 59,
      lista: [],
    },
    scrollTop: 0,
    letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
    loading: false,
  });

  onShow(() => {
    queryList();
  });

  function queryList() {
    examromaApi.myInfo(props.docEntry).then((res) => {
      data.form = res.data;
    });
  }

  function upper(e) {}

  function lower(e) {}

  function scroll(e) {
    data.scrollTop = e.detail.scrollTop;
  }

  function click(item, it, e) {
    if (item.quesTypeId === 1) {
      item.lista.forEach((i) => {
        if (i !== it) {
          i.inspecta = false;
        } else {
          it.inspecta = !it.inspecta;
        }
      });
    } else if (item.quesTypeId === 2) {
      it.inspecta = !it.inspecta;
    } else if (item.quesTypeId === 3) {
      item.lista.forEach((i) => {
        if (i !== it) {
          i.inspecta = false;
        } else {
          it.inspecta = !it.inspecta;
        }
      });
    }
    for (const i in item.lista) {
      if (item.quesTypeId !== 4 && item.lista[i].inspecta === true) {
        item.selected = true;
        break;
      } else if (item.quesTypeId === 4 && item.lista[i].answera != null && item.lista[i].answera !== '') {
        item.selected = true;
        break;
      } else {
        item.selected = false;
      }
    }
  }

  function submitData() {
    let LineNum = 0;
    for (const i in data.form.lista) {
      LineNum++;
      if (!data.form.lista[i].selected) {
        uni.showToast({
          title: `试题 ${LineNum} 未完成！`,
          icon: 'none',
        });
        return false;
      }
    }

    uni.showModal({
      title: '提示',
      content: '确认提交试卷吗？',
      success: function (res) {
        if (res.confirm) {
          data.loading = true;
          examromaApi.submitExam(data.form).then((res) => {
            uni.reLaunch({ url: `/pages/exrom/exromc?docEntry=${props.docEntry}` });
            data.loading = false;
          });
        }
      },
    });
  }

  function showDrawer(item) {
    showRight.value.open();
  }

  function viewExam() {
    data.form.lista.forEach((item) => {
      if (item.quesTypeId === 1) {
        item.lista.forEach((it) => {
          it.inspecta = it.inspect;
        });
      } else if (item.quesTypeId === 2) {
        item.lista.forEach((it) => {
          it.inspecta = it.inspect;
        });
      } else if (item.quesTypeId === 3) {

        item.lista.forEach((it) => {
          it.inspecta = it.inspect;
        });

      } else if (item.quesTypeId === 4) {
        item.lista.forEach((it) => {
          it.answera = it.answer;
        });
      }
      item.selected = true;

    });
  }

  function timeup() {
    data.loading = true;
    examromaApi.submitExam(data.form).then((res) => {
      uni.reLaunch({ url: `/pages/exrom/exromc?docEntry=${props.docEntry}` });
      data.loading = false;
    });
  }
</script>

<style scoped>
  .input {
    border: 1px #ddd solid;
    padding: 5px 5px;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .button {
    width: 100%;
    margin-top: 5px;
    text-align: start;
  }

  page {
    height: 100%;
  }

  .scroll-Y {
    height: 100%;
  }

  .scroll-view-item {
    height: 500rpx;
    line-height: 500rpx;
    text-align: center;
    font-size: 36rpx;
  }

  .demo-uni-row {
    height: 100%;
  }

  .demo-uni-col {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
